<template>
  <div class="resource">
    <el-card>
      <!-- class="project-list-container" -->
      <div>
        <div class="list-h">
          <el-button
            type="primary"
            @click="handleAdd"
            class="add-option"
            v-auth="
              `
/system/menu--add`
            "
            >添加菜单</el-button
          >
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="formInline"
            ref="formRef"
            @submit.prevent
          >
            <el-form-item label="菜单名称" prop="menuName">
              <el-input
                v-model.trim="formInline.menuName"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="tableData"
            v-loading="loading"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          >
            <template #empty>
              <el-empty :image-size="150" description="暂无数据"></el-empty>
            </template>
            <el-table-column prop="menuName" label="菜单名称" width="180">
            </el-table-column>
            <el-table-column prop="menuCode" label="菜单编码">
            </el-table-column>
            <el-table-column prop="menuPath" label="菜单路径">
            </el-table-column>
            <el-table-column prop="menuUrl" label="菜单URL"> </el-table-column>
            <el-table-column prop="icon" label="菜单图标"> </el-table-column>
            <el-table-column prop="menuOrder" label="菜单顺序">
            </el-table-column>
            <el-table-column prop="isDisplay" label="是否显示">
              <template #default="{ row }">
                {{ row.isDisplay === "Y" ? "显示" : "隐藏" }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="resourceList" label="操作按钮" width="160">
              <template #default="{ row }">
                <template v-if="row.resourceList">
                  <span v-for="item in row.resourceList" :key="item.id"
                    >[{{ item.resourceName }}]&emsp;</span
                  >
                </template>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="activeStatus" label="状态" align="center">
              <template #default="{ row }">
                <el-tag
                  v-if="row.activeStatus === ActiveStatusEnum.USE"
                  type="success"
                  >启用</el-tag
                >
                <el-tag
                  v-if="row.activeStatus === ActiveStatusEnum.STOP"
                  type="danger"
                  >停用</el-tag
                >
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{ row }">
                <!-- 根据是否是根页面进行显示 -->
                <!-- v-if="row.isLeaf === '0'" -->
                <el-button
                  type="text"
                  @click="handleAddpage(row)"
                  v-auth="`/system/menu--childadd`"
                  >添加子菜单</el-button
                >
                <el-button
                  type="text"
                  @click="handleEdit(row)"
                  v-auth="`/system/menu--edit`"
                  >编辑</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除该条记录吗？"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <el-button type="text" v-auth="`/system/menu--delete`"
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
    </el-card>

    <el-drawer
      size="50%"
      v-model="drawer"
      :before-close="handleClose"
      destroy-on-close
      custom-class="demo-drawer"
    >
      <template #title>
        <div class="demo-drawer__header">
          {{ mode === "edit" ? "编辑菜单" : "添加菜单" }}
        </div>
      </template>
      <div class="demo-drawer__content">
        <menu-set
          v-if="drawer"
          :menuData="menuData"
          :mode="mode"
          @emitClose="emitClose"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
// import { successMessage, warnMessage } from "/@/utils/message";
import NotifMessage from "/@/utils/message/notification";

import { getMenuList, deleteMenuList } from "/@/api/menu";
// import { deleteMenuList } from "/@/api/menu";
// import { getMenuList } from "/@/api/mock";
import MenuSet from "./components/MenuSet.vue";

import {
  ActiveStatusEnum,
  MenuType,
  ModeType,
  StateType,
  FormInlineType
} from "./types";

export default defineComponent({
  name: "MenuList",
  components: {
    MenuSet
  },
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let loading = ref<boolean>(false);
    let formInline = reactive<FormInlineType>({
      menuName: ""
    });
    let mode = ref<ModeType>("add");
    let drawer = ref<boolean>(false);
    let state = reactive<StateType>({
      tableData: [],
      menuData: {} as MenuType
    });

    // 请求表格数据
    async function getTableData(obj: object = {}) {
      loading.value = true;
      try {
        const { code, data } = await getMenuList(obj);
        if (code === 200) {
          state.tableData = data;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }
    // 打开添加弹窗
    const handleAdd = () => {
      drawer.value = true;
      mode.value = "add";
    };

    // 编辑
    const handleEdit = row => {
      drawer.value = true;
      mode.value = "edit";
      state.menuData = row;
    };

    // 添加子菜单
    const handleAddpage = row => {
      drawer.value = true;
      mode.value = "child_add";
      state.menuData = row;
    };

    // emit关闭
    const emitClose = () => {
      handleClose();
    };

    // 关闭抽屉弹框
    const handleClose = () => {
      drawer.value = false;
      getTableData();
    };

    // 删除菜单
    async function handleDelete(item) {
      try {
        const { code, message } = await deleteMenuList({ id: item.id });
        if (code === 200) {
          // successMessage(`${message}`);
          NotifMessage.success(message);
          getTableData();
        } else {
          // warnMessage(`${message}`);
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    }

    // 重置条件
    const handleReset = (): void => {
      formRef.value.resetFields();
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    // 请求数据
    getTableData();
    return {
      ...toRefs(state),
      ActiveStatusEnum,
      mode,
      drawer,
      formInline,
      formRef,
      loading,
      handleAdd,
      handleEdit,
      handleDelete,
      handleAddpage,
      handleClose,
      emitClose,
      handleReset,
      handleSearch
    };
  }
});
</script>
<style lang="scss" scoped>
.resource {
  .wrap_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    .el-button {
      width: 100%;
      border: 1px dashed gray;
    }
  }
  .demo-drawer {
    .demo-drawer__header {
      line-height: 58px;
      padding-left: 15px;
      font-size: 14px;
      font-weight: 600;
      color: #606266;
    }
    .demo-drawer__content {
      height: calc(100vh - 64px);
      width: 100%;
      border-top: 1px solid rgba(0, 21, 41, 0.15);
    }
  }
  :deep .el-drawer__header {
    margin-bottom: 0px;
    padding-top: 0;
  }
  :deep .el-drawer__body {
    padding: 0;
  }
}
</style>
